html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  background-color: #333;
  height: 100%;
}
.middle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.bar {
  width: 6px;
  height: 60px;
  background-color: #fff;
  display: inline-block;
  /* 使用动画 */
  animation: loading 1.5s ease-in-out infinite;
  /* 动画以低速开始和结束，动画应该无限次播放 */
  /* 
    语法：animation: name duration timing-function delay iteration-count direction;
  */
  /* 
    名字、持续时间、规定动画的速度曲线规定在动画开始之前的延迟、
    规定动画应该播放的次数、定是否应该轮流反向播放动画
  */
  /* 【1】规定动画的速度曲线规定在动画开始之前的延迟： 
    linear	动画从头到尾的速度是相同的。	测试
    ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
    ease-in	动画以低速开始。	测试
    ease-out	动画以低速结束。	测试
    ease-in-out	动画以低速开始和结束。	测试
    cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
  */
  /* 【2】规定动画应该播放的次数：
    n	定义动画播放次数的数值。	测试
    infinite	规定动画应该无限次播放。
  */
  transform-origin: bottom center;
  /* 
    transform-origin 属性允许您改变被转换元素的位置。
    2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
    语法：transform-origin: x-axis y-axis z-axis;
  */
}
/* 
目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
*/
/* 创建动画 */
@keyframes loading {
  /* 
    通过 @keyframes 规则，您能够创建动画。
    0% 是动画的开始时间，100% 动画的结束时间。
    创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
    语法：@keyframes animationname {keyframes-selector {css-styles;}}
  */
  0% {
    transform: scaleY(0.1);
    background-color: #fff;
  }
  50% {
    transform: scaleY(1);
    background-color: #27ae60;
  }
  100% {
    transform: scaleY(0.1);
    background-color: #2980b9;
    /* transparent	默认。背景颜色为透明。 */
  }
}
/* 现在规定每个动画的延迟 */
.bar1 {
  animation-delay: 0.1s;
}
.bar2 {
  animation-delay: 0.2s;
}
.bar3 {
  animation-delay: 0.3s;
}
.bar4 {
  animation-delay: 0.4s;
}
.bar5 {
  animation-delay: 0.5s;
}
.bar6 {
  animation-delay: 0.6s;
}
.bar7 {
  animation-delay: 0.7s;
}
.bar8 {
  animation-delay: 0.8s;
}
